<template>
  <div class="onlineAsk-list">
    <div class="card_wrapper">
      <div class="card_item" v-for="item in cardList" :key="item.id">
        <doctor-card :type="type" :item="item" />
      </div>
    </div>
  </div>
</template>

<script>
import DoctorCard from '@/components/doctor-card'

import API from '@/services'
import { Bus } from '@/utils/eventBus'
export default {
	components: { DoctorCard },
	// inject: ['inputChange'],
	data() {
		return {
			type: '',
			cardList: [],
		}
	},
	methods: {
		async initCardList(name) {
			const res = await API.getExpertList({ params: { name } })
			this.cardList = res
			console.log(res)
		},
	},

	// watch: {
	// 	'$store.getters.inputValue'(newVal) {
	// 		this.initCardList(newVal)
	// 	},
	// },

	created() {
		this.type = this.$route.query.type
		this.initCardList()

		Bus.$on('searchConfirm', (e) => {
			this.initCardList(e)
		})
	},
	destroyed() {
		Bus.$off('searchConfirm')
	},
	computed: {
		// inputVal() {
		// 	return this.$store.getters.inputValue
		// },
	},
}
</script>

<style lang="scss" scoped>
.onlineAsk-list {
  padding-top: 16px;
  .card_wrapper {
    .card_item {
      margin-bottom: 12px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
